<template>
	<view>
		<view class="one">
			<view class="re">
				近期上新 <span class="hot">NEW</span>
			</view>
			<view class="you">
				全部 <i class="iconfont icon-right"></i>
			</view>
		</view>
	</view>
	
		<scroll-view class="scroll-view_H"  scroll-x="true" @scroll="scroll" scroll-left="120" >
			<view  class="aa"  v-for="item,index in Newlist" :key="item.id">
					<img :src="item.mainImage" alt="">
					<view class="shij">
						{{item.totalTime}}
					</view>
				<p>{{item.title}}</p>
				
				
				<p class="teacher"><i class="iconfont icon-laoshi2" style="font-size: 12px;"></i>{{item.nickName}}</p>
				<view class="small">
					<span class="money" v-if="item.isFree"><i class="iconfont icon-moneybag"  style="font-size: 12px;"></i>免费</span>
						<span class="money" v-else><i class="iconfont icon-moneybag"  style="font-size: 12px;"></i>{{item.priceDiscount||item.priceOriginal}}</span>
					<span class="zaidu"><i class="iconfont icon-video"  style="font-size: 12px;"></i>{{item.studyTotal}}人在学</span>
				
				</view>
			</view>
		</scroll-view>
</template>

<script>
import {
		ref,
		reactive
	} from 'vue'
	import {getNewList} from '../../unti/api.js'
	export default {
		setup(props, context) {
			let Newlist=ref([])
			let scrollTop = ref(0);
			let old=reactive({
				scrollTop: 0
			});
		 scroll= function(e) {
					// console.log(e)
					old.scrollTop = e.detail.scrollTop
				}
			const Nlist=getNewList().then((res)=>{
				Newlist.value=res.data.data.records
				console.log(Newlist);
			})
				
				
			return{
			scrollTop,
			old,
			Newlist,
			scroll
				}
		}



	}
</script>

<style>
		@import '../../static/icon/iconfont.css';
		.shij{
			position: absolute;
			padding: 2px 4px;
			border-radius: 30px;
			background: rgba(1, 0, 0, 0.5);
			color: white;
			top: 167rpx;
			right: 10rpx;
			font-size: 7rpx;
		}
		.teacher{
			font-size: 13px;
			color: #ccc;
		}
		.zaidu{
			margin-left: 20px;
			font-size: 12px;
		}
		.money{
			color: orange;
			font-size: 12px;
		}
		.scroll-view_H{
			white-space: nowrap;
			width: 100%;
		
		}
		.aa{
			width: 200px;
			height: 200px;
			margin: 0;
			padding: 0;
			display: inline-block;
				margin: 10px 10px;
				/* overflow: hidden; */
				/* text-overflow: ellipsis; */
				white-space: initial;
				box-shadow: 3px 3px 4px 1px #ccc;
				border-radius: 8px;
				position: relative;
		}
	.one {
		height: 50px;
		line-height: 50px;
	}

	.re {
		float: left;
		font-size: 20px;
	}

	.you {
		float: right;
		font-size: 14px;
		color: #ccc;
	}

	.hot {
		background-color: red;
		padding: 0px 1px;
		color: white;
		font-size: 13px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}
/* 	
.imagg{
	width: 40%;
} */
 img{
	width: 100%;
	height: 54%;
	border-radius: 8px;

}


</style>
